<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-05-11 11:40:24
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-07-11 11:25:37
 * @FilePath: \ant-design-vue-jeecg-master\src\views\communicationFile\management.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!-- <a-col :md="6" :sm="12">
            <a-form-item label="封包">
            <j-input placeholder="输入账号模糊查询" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="发送结果">
             <j-input placeholder="输入账号模糊查询" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>-->
          <a-col :md="6" :sm="8">
            <a-form-item label="时间">
              <a-date-picker @change="onChange" v-model="queryParam.startTime" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-upload
                name="file"
                :showUploadList="false"
                :multiple="false"
                :headers="tokenHeader"
                :action="importExcelUrl"
                @change="handleImportExcel"
              >
                <a-button type="primary" icon="import" style="margin-left: 8px">导入</a-button>
              </a-upload>
              <a-button type="primary" @click="searchQuery" style="margin-left: 8px">发送</a-button>
              <!-- <a-icon type="vertical-align-bottom" /> -->
              <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> -->
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table :columns="columns" :data-source="data" align="center" bordered>
      <span slot="fileLocation" slot-scope="text">{{ text }}</span>
      <template slot="packet" slot-scope="text">
        <span style="cursor: pointer">{{ text == 0 ? '未完成' : '完成' }}</span>
      </template>
      <template slot="sendResults" slot-scope="text">
        <span :class="text == 0 ? 'errorColor' : ''">{{ text == 0 ? '失败' : '成功' }}</span>
      </template>

      <template slot="isExit" slot-scope="text">
        <a-button type="primary" v-if="text == 0">退网</a-button>
        <a-button v-if="text == 1">退网</a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  mixins: [JeecgListMixin],
  data() {
    const data = [
      {
        key: '1',
        No: 1,
        fileLocation: 'E:/Work/bin/WG/video',
        packet: 0,
        sendResults: 1,
        time: '2023-05-05 12:32:28',
        isExit: 1,
        fileName: '文件1饿4ed',
      },
      {
        key: '2',
        No: 1,
        fileLocation: 'E:/Work/bin/WG/video',
        packet: 1,
        sendResults: 1,
        time: '2023-05-01 16:32:28',
        isExit: 0,
        fileName: '文件14ed',
      },
      {
        key: '3',
        No: 2,
        fileLocation: 'E:/Work/bin/WG/video',
        packet: 1,
        sendResults: 0,
        time: '/',
        isExit: 1,
        fileName: '文件1饿4',
      },
      {
        key: '4',
        No: 2,
        fileLocation: 'E:/Work/bin/WG/video',
        packet: 0,
        sendResults: 1,
        time: '2023-05-01 16:32:28',
        isExit: 0,
        fileName: '文件1饿3ed',
      },
      {
        key: '5',
        No: 2,
        fileLocation: 'E:/Work/bin/WG/video',
        packet: 1,
        sendResults: 0,
        time: '/',
        isExit: 1,
        fileName: '文件1饿4',
      },
      {
        key: '6',
        No: 2,
        fileLocation: 'E:/Work/bin/WG/video',
        packet: 0,
        sendResults: 1,
        time: '2023-05-01 16:32:28',
        isExit: 0,
        fileName: '文件1饿3ed',
      },
    ]
    return {
      data,
      queryParam: {},
      reason: '加载不出来',
      columns: [
        {
          title: '编号',
          dataIndex: 'No',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '源文件位置',
          dataIndex: 'fileLocation',
          key: 'fileLocation',
          scopedSlots: { customRender: 'fileLocation' },
        },
        {
          title: '封包',
          dataIndex: 'packet',
          key: 'packet',
          scopedSlots: { customRender: 'packet' },
        },
        {
          title: '发送结果',
          dataIndex: 'sendResults',
          key: 'sendResults',
          ellipsis: true,
          scopedSlots: { customRender: 'sendResults' },
        },
        {
          title: '时间',
          dataIndex: 'time',
          key: 'time',
          ellipsis: true,
        },
      ],
      url: {
        importExcelUrl: 'channel/nmcChannelInfo/importExcel',
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  // keep-alive 组件激活时调用
  activated() {
    this.data.forEach((i, index) => {
      if (i.sendResults == 0) {
        this.$notification['error']({
          message: `音频文件${index}发送失败`,
          className: 'theme-style',
          // duration: null, //自动关闭
          description: (
            <div>
              <p style="margin-bottom:5px;margin-top:10px">
                音频文件名：<span>{i.fileName}</span>
              </p>
              原因：<span>{this.reason}</span>
            </div>
          ),

          // `音频文件名：${i.fileName},原因：${this.reason}`,
        })
      }
    })
  },
  created() {
    this.loadData()
  },
  methods: {
    onChange() { },
    loadData() { },
    fileLocationReplace(text) {
      console.log(JSON.stringify(text))
      console.log(JSON.stringify(text).replace(/\\/g, '/'))
      return JSON.stringify(text).replace(/\\/g, '/')
    },
  },
}
</script>

<style lang="less" scoped>
.errorColor {
  color: red;
}
</style>
<style></style>
